<template>
  <div class="container">
    <a-space style="width: 100%" direction="vertical" fill :size="15">
      <a-row :gutter="24">
        <a-col :span="16">
          <a-space direction="vertical" fill :size="15">
            <loginInfo />
            <ToolBox />
          </a-space>
        </a-col>
        <a-col :span="8">
          <NoticeAnnouncement />
        </a-col>
        <a-col :span="12"> </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="16">
          <a-space direction="vertical" fill :size="15">
            <TodoStatistics />
            <a-row :gutter="24">
              <a-col :span="12"><TodoList /> </a-col>
              <a-col :span="12"><OrderDeliveryStatus /> </a-col>
            </a-row>
          </a-space>
        </a-col>
        <a-col :span="8">
          <AnalyzeData />
        </a-col>
      </a-row>
    </a-space>
    <!-- <a-space direction="vertical" fill :size="15">

    </a-space> -->
    <!-- <div class="left-side">
      <a-space direction="vertical" fill :size="15">
        <loginInfo />
        <ToolBox />

        <div
          style="
            width: 100%;
            height: 250px;
            display: flex;
            justify-content: space-between;
          "
          ><TodoList style="width: 49%" /><OrderDeliveryStatus
            style="width: 49%"
        /></div>
      </a-space>
    </div>
    <div class="right-side">
      <a-space direction="vertical" fill :size="15">
        <NoticeAnnouncement />
        <AnalyzeData />
      </a-space>
    </div> -->
  </div>
</template>

<script lang="ts" setup>
  import loginInfo from './components/LoginInfo.vue';
  import ToolBox from './components/ToolBox.vue';
  import TodoStatistics from './components/TodoStatistics.vue';
  import TodoList from './components/TodoList.vue';
  import OrderDeliveryStatus from './components/OrderDeliveryStatus.vue';
  import NoticeAnnouncement from './components/NoticeAnnouncement.vue';
  import AnalyzeData from './components/AnalyzeData.vue';
  // import DataPanel from './components/data-panel.vue';
  // import ContentChart from './components/content-chart.vue';
  // import PopularContent from './components/popular-content.vue';
  // import CategoriesPercent from './components/categories-percent.vue';
  // import RecentlyVisited from './components/recently-visited.vue';
  // import QuickOperation from './components/quick-operation.vue';
  // import Announcement from './components/announcement.vue';
  // import Carousel from './components/carousel.vue';
  // import Docs from './components/docs.vue';
</script>

<!-- <script lang="ts">
  export default {
    name: 'Dashboard', // If you want the include property of keep-alive to take effect, you must name the component
  };
</script> -->

<style scoped lang="less">
  .container {
    background-color: #f2f3f5;
    padding: 10px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
  }

  // .left-side {
  //   flex: 1;
  // }

  :deep(.layout-content-content) {
    background: #f2f3f5;
  }

  // .panel {
  //   background-color: var(--color-bg-2);
  //   border-radius: 4px;
  //   overflow: auto;
  // }
  // :deep(.panel-border) {
  //   margin-bottom: 0;
  //   border-bottom: 1px solid rgb(var(--gray-2));
  // }
  // .moduler-wrap {
  //   border-radius: 4px;
  //   background-color: var(--color-bg-2);
  //   :deep(.text) {
  //     font-size: 12px;
  //     text-align: center;
  //     color: rgb(var(--gray-8));
  //   }

  //   :deep(.wrapper) {
  //     margin-bottom: 8px;
  //     text-align: center;
  //     cursor: pointer;

  //     &:last-child {
  //       .text {
  //         margin-bottom: 0;
  //       }
  //     }
  //     &:hover {
  //       .icon {
  //         color: rgb(var(--arcoblue-6));
  //         background-color: #e8f3ff;
  //       }
  //       .text {
  //         color: rgb(var(--arcoblue-6));
  //       }
  //     }
  //   }

  //   :deep(.icon) {
  //     display: inline-block;
  //     width: 32px;
  //     height: 32px;
  //     margin-bottom: 4px;
  //     color: rgb(var(--dark-gray-1));
  //     line-height: 32px;
  //     font-size: 16px;
  //     text-align: center;
  //     background-color: rgb(var(--gray-1));
  //     border-radius: 4px;
  //   }
  // }
</style>
